<template>
  <div class="box">
    <!-- 内容 -->
    <div style="width: 95%; height: 100%; margin: 0 auto" class="box-content">
      <!-- 头部 -->
      <div class="box-top" style="display: flex">
        <div style="width: 40%" class="box-top-left">
          <div class="daohang">
            <i style="font-size: 20px; color: #999; line-height: 60px; float: left" class="el-icon-s-home"></i>
            <el-breadcrumb>
              <el-breadcrumb-item style="font-size: 15px; color: #999; line-height: 60px; margin-left: 8px; display: block; float: left">首页 </el-breadcrumb-item>
              <i style="font-size: 15px; line-height: 63px; margin-left: -3px; float: left" class="el-icon-folder-opened"></i>
              <el-breadcrumb-item style="font-size: 15px; line-height: 64px; margin-left: 8px; display: block; float: left">财务管理</el-breadcrumb-item>
              <i style="font-size: 15px; line-height: 63px; margin-left: 5px; float: left" class="el-icon-folder-opened"></i>
              <el-breadcrumb-item style="font-size: 15px; line-height: 64px; margin-left: 8px; display: block; float: left">余额明细</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <!-- 时间 -->
          <div class="block" @click="Manchu()">
            <el-date-picker @blur="Man()" popper-class="date" change="datechange()" v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
          </div>
        </div>
        <!--  -->
        <div style="width: 30%"></div>
        <!-- 右侧 -->
        <div class="box-top-right;" style="width: 35%">
          <input placeholder="请搜索会员信息/操作人信息" v-model="values" class="input" type="text" />
          <button @click="search">搜索</button>
          <button class="button2">导出</button>
        </div>
      </div>
      <!-- 表单 -->
      <div class="box-table">
        <div v-if="isFalse" style="width: 100%; height: 335px"></div>
        <div class="table-box" v-if="isTime1">
          <el-table v-if="isSe" :data="showList" height="390" border style="width: 90%; margin-left: 2%">
            <el-table-column prop="name" label="用户" width="180"> </el-table-column>
            <el-table-column prop="telephone" label="用户联系方式"> </el-table-column>
            <el-table-column prop="Integralvariation" label="余额变化"> </el-table-column>
            <el-table-column prop="jifen" label="当前余额"> </el-table-column>
            <el-table-column prop="remarks" label="备注"> </el-table-column>
            <el-table-column prop="operator" label="操作人"> </el-table-column>
            <el-table-column prop="time" label="操作时间"> </el-table-column>
          </el-table>

          <!-- 搜索 -->
          <el-table v-if="isSea" :data="searchList" height="390" border style="width: 90%; margin-left: 2%">
            <el-table-column class="table" cell-style="background:red" prop="name" label="用户" width="180"> </el-table-column>
            <el-table-column prop="telephone" label="用户联系方式"> </el-table-column>
            <el-table-column prop="Integralvariation" label="余额变化"> </el-table-column>
            <el-table-column prop="jifen" label="当前余额"> </el-table-column>
            <el-table-column prop="remarks" label="备注"> </el-table-column>
            <el-table-column prop="operator" label="操作人"> </el-table-column>
            <el-table-column prop="data" label="操作时间"> </el-table-column>
          </el-table>

          <div class="table-bottom" style="display: flex">
            <div style="width: 30%" class="table-left">
              <span style="font-size: 15px; display: block; margin: 10px 10px">第{{ this.size }}条 共{{ this.nameList.length / this.pageNum }}页,共{{ this.nameList.length }}条</span>
            </div>
            <div style="width: 70%" class="table-right">
              <el-pagination
                style="margin-left: 40%; margin-top: 1%"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[8, 10, 20, 40]"
                :page-size="5"
                :total="nameList.length"
                layout="total, sizes, prev, pager, next, jumper"
              >
              </el-pagination>
            </div>
          </div>
        </div>
        <!-- 时间 -->
        <div class="table-box" v-if="isTime">
          <el-table :data="dataTime" height="390" border style="width: 90%; margin-left: 2%">
            <el-table-column class="table" cell-style="background:red" prop="name" label="用户" width="180"> </el-table-column>
            <el-table-column prop="telephone" label="用户联系方式"> </el-table-column>
            <el-table-column prop="Integralvariation" label="余额变化"> </el-table-column>
            <el-table-column prop="jifen" label="当前余额"> </el-table-column>
            <el-table-column prop="remarks" label="备注"> </el-table-column>
            <el-table-column prop="operator" label="操作人"> </el-table-column>
            <el-table-column prop="time" label="操作时间"> </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getNameList } from '../../api/index'
export default {
  data() {
    return {
      // 搜索
      isSe: true,
      isSea: false,
      // 搜索内容
      values: '',
      searchList: [],
      currentPage4: 1,
      isFalse: false,
      // 时间
      data1: [],
      isTime1: true,
      isTime: false,
      dataTime: [],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date())
            },
          },
          {
            text: '昨天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            },
          },
          {
            text: '一周前',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            },
          },
        ],
      },
      value1: [new Date(), new Date()],
      value2: '',
      pageNum: 8, // 每页页数
      size: 1,
      nameList: [], // 总数据
      showList: [],
    }
  },
  watch: {
    // 被侦听的变量count
    values() {
      if (this.values == '') {
        this.isSe = true
        this.isSea = false
      }
    },
  },
  created() {
    this.getList()
  },
  methods: {
    // 请求数据
    getList() {
      getNameList().then((res) => {
        this.nameList = res.data
        this.showList = this.nameList.slice(0, this.pageNum)
        this.nameList.forEach((item) => {
          let a = parseInt(item.time)
          //  console.log(a)
          // 时间转换
          function timestampToTime(timestamp) {
            var date = new Date(timestamp) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
            var Y = date.getFullYear() + '-'
            var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
            var D = date.getDate() + ' '
            var h = date.getHours() + ':'
            var m = date.getMinutes() + ':'
            var s = date.getSeconds()
            return Y + M + D + h + m + s
          }
          item.time = timestampToTime(a)
          // console.log(item.time)
        })
      })
    },
    Manchu() {
      this.isFalse = true
    },
    Man() {
      this.isFalse = false
      var a = new Date(this.value1[0])
      let q = a.getTime()
      console.log(q)
      var b = new Date(this.value1[1])
      let w = b.getTime()
      console.log(w)
      this.nameList.forEach((item) => {
        var c = new Date(item.time)
        let e = c.getTime()
        console.log(e >= q && e < w)
        if (e >= q && e < w) {
          this.dataTime.push(item)
          this.isTime = true
          this.isTime1 = false
        }
        // console.log(this.dataTime)
      })
    },
    handleSizeChange(val) {
      this.pageNum = val
      this.showList = this.nameList.slice(0, this.pageNum)
    },
    handleCurrentChange(val) {
      this.size = val
      this.showList = this.nameList.slice(val * this.pageNum - this.pageNum, val * this.pageNum)
    },
    // 搜索
    search() {
      // console.log(this.values)
      this.nameList.forEach((item) => {
        if (this.values == item.name) {
          this.searchList.push(item)
          this.isSe = false
          this.isSea = true
          if (this.searchList.length > 1) {
            this.searchList.shift()
          }
          console.log(this.searchList)
        }
      })
    },
    // 时间
  },
}
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 900px;
  // 头部
  .box-top {
    width: 100%;
    height: 110px;
    // background:blue;
    // 导航
    .daohang {
      width: 100%;
      height: 50px;
    }
    // 时间
    .block {
      width: 20%;
      margin-top: 1%;
    }
    // 右侧
    .input {
      width: 70%;
      height: 30px;
      margin-top: 13%;
    }
    button {
      width: 12%;
      height: 33px;
    }
    .button2 {
      margin: 3px;
    }
    // 表格
  }
  .box-table {
    width: 100%;
    height: 500px;
  }
  .table-box {
    width: 100%;
    height: 450px;
    // background: blue;
    margin-top: 2%;
    .table-bottom {
      width: 85%;
      height: 60px;
      // background: red;
      margin-left: 7%;
    }
  }
}
</style>
